import styles from './basicLayout.css';
import { Layout, message, Menu, Icon, Button } from 'antd';
import { Link } from 'react-router-dom';
import router from 'umi/router';

const { Header, Footer, Content, Sider } = Layout;
const { Item, SubMenu } = Menu;

const menu = [
	{ path: '/graphic', icon: 'picture', title: '图文管理', children: [] },
	{
		path: '/data',
		icon: 'area-chart',
		title: '数据管理',
		children: [
			{ path: '/data/construction', title: '民生建设' },
			{ path: '/data/convenience', title: '便民生活' },
			{ path: '/data/events', title: '事件上报' },
			{ path: '/data/park', title: '停车场' },
		],
	},
];
class BasicLayout extends React.PureComponent {
	constructor() {
		super();
		this.state = {};
	}
	componentDidMount() {
		const pathname = window.location.pathname;
		const split_pathname = pathname.split('/');
		const selectedKeys =
			split_pathname[1] === 'graphic'
				? [`/${split_pathname[1]}`]
				: (split_pathname[2] && [`/${split_pathname[1]}/${split_pathname[2]}`]) || [
						`/${split_pathname[1]}`,
				  ] || [''];
		this.setState({
			openKeys: [`/${split_pathname[1]}`],
			selectedKeys,
		});
	}
	onSelect = ({ item, key, selectedKeys }) => {
		this.setState({
			selectedKeys,
		});
	};
	onOpenChange = openKeys => {
		this.setState({
			openKeys,
		});
	};
	signOut = () => {
		localStorage.clear();
		message.success('已登出!');
		router.push('/');
	};
	render() {
		const { openKeys, selectedKeys } = this.state;
		const menuItem = item => {
			if (item.children.length > 0) {
				return (
					<SubMenu
						key={item.path}
						title={
							<Link to={item.path}>
								<Icon type={item.icon} />
								{item.title}
							</Link>
						}
					>
						{item.children.map(item => (
							<Item key={item.path}>
								<Link to={item.path}>{item.title}</Link>
							</Item>
						))}
					</SubMenu>
				);
			}
			return (
				<Item key={item.path}>
					<Link to={item.path}>
						<Icon type={item.icon} />
						{item.title}
					</Link>
				</Item>
			);
		};
		return (
			<div className={styles.normal}>
				<Layout style={{ height: '100%' }}>
					<Sider>
						<p className={styles.nav}>
							{/* <Icon type="" /> */}
							青杠树后台管理系统
						</p>
						<Menu
							mode="inline"
							theme="dark"
							onOpenChange={this.onOpenChange}
							onSelect={this.onSelect}
							selectedKeys={selectedKeys}
							openKeys={openKeys}
						>
							{menu.map(item => menuItem(item))}
						</Menu>
						<div className={styles.signout} onClick={this.signOut}>
							退出登录
						</div>
					</Sider>
					<Layout>
						<Content className={styles.content}>{this.props.children}</Content>
						<Footer style={{ textAlign: 'center' }}>© 2018 云智天下科技有限公司</Footer>
					</Layout>
				</Layout>
			</div>
		);
	}
}

export default BasicLayout;
